<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue Class与Style绑定详解与示例</title>
    <script src="https://unpkg.com/vue@3.4.0"></script>
    <style>
      body {
        font-family: 'Consolas', '微软雅黑';
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
        background-color: #f5f5f5;
        line-height: 1.6;
      }
      code {
        font-family: 'Consolas', '微软雅黑';
      }
      .container {
        background: white;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
      }
      h1 {
        color: #2c3e50;
        text-align: center;
        margin-bottom: 30px;
        font-size: 2.5em;
      }
      h2 {
        color: #34495e;
        border-bottom: 3px solid #3498db;
        padding-bottom: 10px;
        margin-top: 30px;
      }
      h3 {
        color: #2980b9;
        margin-top: 25px;
      }
      .demo-section {
        margin: 20px 0;
        padding: 20px;
        border: 1px solid #ddd;
        border-radius: 8px;
        background-color: #f9f9f9;
      }
      .code-block {
        background-color: #2d3748;
        border-radius: 8px;
        padding: 0;
        margin: 15px 0;
        overflow: hidden;
      }
      .code-block textarea {
        height: auto;
        min-height: 300px;
        font-family: 'Consolas', '微软雅黑';
        font-size: 13px;
        padding: 15px;
        border: none;
        border-radius: 0;
        background-color: transparent;
        resize: none;
        line-height: 1.5;
        box-sizing: border-box;
        color: #e2e8f0;
        width: 100%;
        outline: none;
      }
      .style-box {
        width: 200px;
        height: 100px;
        margin: 10px;
        display: inline-block;
        text-align: center;
        line-height: 100px;
        border: 2px solid #333;
        transition: all 0.3s ease;
      }
      .controls {
        margin: 10px 0;
      }
      .controls input,
      .controls select {
        margin: 5px;
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 14px;
      }
      button {
        background-color: #3498db;
        color: white;
        padding: 8px 16px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
        margin: 5px;
        transition: background-color 0.3s;
      }
      button:hover {
        background-color: #2980b9;
      }
      button:disabled {
        background-color: #95a5a6;
        cursor: not-allowed;
      }
      .highlight {
        background-color: #fff3cd;
        padding: 2px 4px;
        border-radius: 3px;
      }
      .performance-note {
        background: #e8f4fd;
        padding: 15px;
        border-radius: 5px;
        border-left: 4px solid #2196f3;
        margin: 15px 0;
      }
      .warning {
        background: #fff3cd;
        padding: 15px;
        border-radius: 5px;
        border-left: 4px solid #ffc107;
        color: #856404;
      }
      .info {
        background: #d1ecf1;
        padding: 15px;
        border-radius: 5px;
        border-left: 4px solid #17a2b8;
        color: #0c5460;
      }
      label {
        display: inline-block;
        margin: 5px 10px;
        cursor: pointer;
      }
      
      /* Class绑定演示样式 */
      .active { background-color: #3498db; color: white; }
      .error { background-color: #e74c3c; color: white; }
      .warning-class { background-color: #f39c12; color: white; }
      .success { background-color: #27ae60; color: white; }
      .large { font-size: 20px; padding: 15px; }
      .small { font-size: 12px; padding: 5px; }
      .rounded { border-radius: 20px; }
      .shadow { box-shadow: 0 4px 8px rgba(0,0,0,0.2); }
      .animated { transition: all 0.3s ease; }
      .rotate { transform: rotate(15deg); }
      .scale { transform: scale(1.1); }
    </style>
  </head>
  <body>
    <h1>Vue Class与Style绑定详解与示例</h1>

    <!-- 概述 -->
    <div class="container">
      <h2>概述</h2>
      <p>Vue.js的Class与Style绑定是构建动态样式的核心功能。通过数据绑定，我们可以根据组件状态动态地改变元素的外观。主要包括：</p>
      <ul>
        <li><span class="highlight">Class绑定</span>：动态添加或移除CSS类</li>
        <li><span class="highlight">Style绑定</span>：直接绑定内联样式</li>
        <li><span class="highlight">对象语法</span>：使用对象形式进行条件绑定</li>
        <li><span class="highlight">数组语法</span>：使用数组形式组合多个类或样式</li>
        <li><span class="highlight">计算属性</span>：基于复杂逻辑的动态样式</li>
      </ul>
    </div>

    <!-- 1. Class绑定 - 对象语法 -->
    <div class="container">
      <h2>1. Class绑定 - 对象语法</h2>
      <p>使用对象语法可以根据数据的真假值来决定是否应用某个CSS类。</p>
      
      <div class="demo-section" id="class-object-demo">
        <h3>Class对象语法演示</h3>
        <div 
          class="style-box animated"
          :class="{
            active: isActive,
            error: hasError,
            'warning-class': hasWarning,
            large: isLarge,
            rounded: isRounded,
            shadow: hasShadow
          }">
          Class对象绑定
        </div>
        
        <div class="controls">
          <label><input type="checkbox" v-model="isActive" /> 激活状态</label>
          <label><input type="checkbox" v-model="hasError" /> 错误状态</label>
          <label><input type="checkbox" v-model="hasWarning" /> 警告状态</label>
          <label><input type="checkbox" v-model="isLarge" /> 大尺寸</label>
          <label><input type="checkbox" v-model="isRounded" /> 圆角</label>
          <label><input type="checkbox" v-model="hasShadow" /> 阴影</label>
        </div>
      </div>

      <div class="code-block">
        <textarea readonly>
<!-- Class对象语法 -->
<div 
  class="style-box animated"
  :class="{
    active: isActive,
    error: hasError,
    'warning-class': hasWarning,
    large: isLarge,
    rounded: isRounded,
    shadow: hasShadow
  }">
  Class对象绑定
</div>

// JavaScript代码
const classObjectApp = createApp({
  setup() {
    const isActive = ref(false)
    const hasError = ref(false)
    const hasWarning = ref(false)
    const isLarge = ref(false)
    const isRounded = ref(false)
    const hasShadow = ref(false)
    
    return {
      isActive,
      hasError,
      hasWarning,
      isLarge,
      isRounded,
      hasShadow
    }
  }
})
classObjectApp.mount('#class-object-demo')
        </textarea>
      </div>

      <div class="performance-note">
        <strong>重要提示：</strong>对象语法中的键名如果包含特殊字符（如连字符），需要用引号包围。
      </div>
    </div>

    <!-- 2. Class绑定 - 数组语法 -->
    <div class="container">
      <h2>2. Class绑定 - 数组语法</h2>
      <p>数组语法允许我们应用多个类，可以混合使用字符串和对象。</p>
      
      <div class="demo-section" id="class-array-demo">
        <h3>Class数组语法演示</h3>
        <div 
          class="style-box"
          :class="[baseClass, themeClass, { animated: isAnimated, rotate: shouldRotate }]">
          Class数组绑定
        </div>
        
        <div class="controls">
          <label>基础类：
            <select v-model="baseClass">
              <option value="">无</option>
              <option value="large">大尺寸</option>
              <option value="small">小尺寸</option>
            </select>
          </label>
          <label>主题类：
            <select v-model="themeClass">
              <option value="">默认</option>
              <option value="active">激活</option>
              <option value="error">错误</option>
              <option value="warning-class">警告</option>
              <option value="success">成功</option>
            </select>
          </label>
          <label><input type="checkbox" v-model="isAnimated" /> 动画效果</label>
          <label><input type="checkbox" v-model="shouldRotate" /> 旋转效果</label>
        </div>
      </div>

      <div class="code-block">
        <textarea readonly>
<!-- Class数组语法 -->
<div 
  class="style-box"
  :class="[baseClass, themeClass, { animated: isAnimated, rotate: shouldRotate }]">
  Class数组绑定
</div>

// JavaScript代码
const classArrayApp = createApp({
  setup() {
    const baseClass = ref('')
    const themeClass = ref('')
    const isAnimated = ref(true)
    const shouldRotate = ref(false)
    
    return {
      baseClass,
      themeClass,
      isAnimated,
      shouldRotate
    }
  }
})
classArrayApp.mount('#class-array-demo')
        </textarea>
      </div>

      <div class="info">
        <strong>提示：</strong>数组语法可以混合字符串、变量和对象，提供了极大的灵活性。
      </div>
    </div>

    <!-- 3. Style绑定 - 对象语法 -->
    <div class="container">
      <h2>3. Style绑定 - 对象语法</h2>
      <p>Style对象语法允许我们直接绑定内联样式，CSS属性名可以使用驼峰式或短横线分隔。</p>
      
      <div class="demo-section" id="style-object-demo">
        <h3>Style对象语法演示</h3>
        <div 
          class="style-box"
          :style="{
            backgroundColor: bgColor,
            color: textColor,
            fontSize: fontSize + 'px',
            borderRadius: borderRadius + 'px',
            transform: `rotate(${rotation}deg) scale(${scale})`,
            borderWidth: borderWidth + 'px',
            borderColor: borderColor
          }">
          Style对象绑定
        </div>
        
        <div class="controls">
          <label>背景色：<input type="color" v-model="bgColor"></label>
          <label>文字色：<input type="color" v-model="textColor"></label>
          <label>边框色：<input type="color" v-model="borderColor"></label>
          <br>
          <label>字体大小：<input type="range" min="12" max="32" v-model="fontSize"> {{fontSize}}px</label>
          <label>圆角：<input type="range" min="0" max="50" v-model="borderRadius"> {{borderRadius}}px</label>
          <br>
          <label>旋转：<input type="range" min="0" max="360" v-model="rotation"> {{rotation}}°</label>
          <label>缩放：<input type="range" min="0.5" max="2" step="0.1" v-model="scale"> {{scale}}x</label>
          <label>边框宽度：<input type="range" min="1" max="10" v-model="borderWidth"> {{borderWidth}}px</label>
        </div>
      </div>

      <div class="code-block">
        <textarea readonly>
<!-- Style对象语法 -->
<div 
  class="style-box"
  :style="{
    backgroundColor: bgColor,
    color: textColor,
    fontSize: fontSize + 'px',
    borderRadius: borderRadius + 'px',
    transform: `rotate(${rotation}deg) scale(${scale})`,
    borderWidth: borderWidth + 'px',
    borderColor: borderColor
  }">
  Style对象绑定
</div>

// JavaScript代码
const styleObjectApp = createApp({
  setup() {
    const bgColor = ref('#3498db')
    const textColor = ref('#ffffff')
    const borderColor = ref('#2c3e50')
    const fontSize = ref(16)
    const borderRadius = ref(10)
    const rotation = ref(0)
    const scale = ref(1)
    const borderWidth = ref(2)
    
    return {
      bgColor,
      textColor,
      borderColor,
      fontSize,
      borderRadius,
      rotation,
      scale,
      borderWidth
    }
  }
})
styleObjectApp.mount('#style-object-demo')
        </textarea>
      </div>

      <div class="warning">
        <strong>注意：</strong>CSS属性名可以使用驼峰式（backgroundColor）或短横线分隔（'background-color'）。
      </div>
    </div>

    <!-- 4. Style绑定 - 数组语法 -->
    <div class="container">
      <h2>4. Style绑定 - 数组语法</h2>
      <p>Style数组语法允许我们将多个样式对象应用到同一个元素上。</p>
      
      <div class="demo-section" id="style-array-demo">
        <h3>Style数组语法演示</h3>
        <div 
          class="style-box"
          :style="[baseStyle, themeStyle, sizeStyle, effectStyle]">
          Style数组绑定
        </div>
        
        <div class="controls">
          <button @click="randomizeStyles">随机样式</button>
          <button @click="resetStyles">重置样式</button>
          <button @click="toggleEffect">切换特效</button>
        </div>
      </div>

      <div class="code-block">
        <textarea readonly>
<!-- Style数组语法 -->
<div 
  class="style-box"
  :style="[baseStyle, themeStyle, sizeStyle, effectStyle]">
  Style数组绑定
</div>

// JavaScript代码
const styleArrayApp = createApp({
  setup() {
    const baseStyle = ref({
      border: '2px solid #333',
      transition: 'all 0.3s ease'
    })
    
    const themeStyle = ref({
      backgroundColor: '#ecf0f1',
      color: '#2c3e50'
    })
    
    const sizeStyle = ref({
      width: '200px',
      height: '100px'
    })
    
    const effectStyle = ref({})
    
    const randomizeStyles = () => {
      const colors = ['#e74c3c', '#3498db', '#2ecc71', '#f39c12', '#9b59b6']
      themeStyle.value = {
        backgroundColor: colors[Math.floor(Math.random() * colors.length)],
        color: 'white',
        transform: `rotate(${Math.random() * 360}deg)`
      }
    }
    
    const resetStyles = () => {
      themeStyle.value = {
        backgroundColor: '#ecf0f1',
        color: '#2c3e50',
        transform: 'rotate(0deg)'
      }
    }
    
    const toggleEffect = () => {
      effectStyle.value = effectStyle.value.boxShadow ? {} : {
        boxShadow: '0 8px 16px rgba(0,0,0,0.3)',
        transform: 'translateY(-5px)'
      }
    }
    
    return {
      baseStyle,
      themeStyle,
      sizeStyle,
      effectStyle,
      randomizeStyles,
      resetStyles,
      toggleEffect
    }
  }
})
styleArrayApp.mount('#style-array-demo')
        </textarea>
      </div>
    </div>

    <!-- 5. 计算属性样式 -->
    <div class="container">
      <h2>5. 计算属性样式</h2>
      <p>使用计算属性可以基于复杂逻辑来生成样式，提供更强大的动态样式能力。</p>
      
      <div class="demo-section" id="computed-style-demo">
        <h3>计算属性样式演示</h3>
        <div class="style-box" :style="computedStyle">
          计算样式
        </div>
        
        <div class="controls">
          <label>主题：
            <select v-model="theme">
              <option value="light">明亮</option>
              <option value="dark">暗黑</option>
              <option value="colorful">彩色</option>
              <option value="gradient">渐变</option>
            </select>
          </label>
          <label>大小：
            <select v-model="size">
              <option value="small">小</option>
              <option value="medium">中</option>
              <option value="large">大</option>
            </select>
          </label>
          <label>状态：
            <select v-model="status">
              <option value="normal">正常</option>
              <option value="hover">悬停</option>
              <option value="active">激活</option>
              <option value="disabled">禁用</option>
            </select>
          </label>
        </div>
      </div>

      <div class="code-block">
        <textarea readonly>
<!-- 计算属性样式 -->
<div class="style-box" :style="computedStyle">
  计算样式
</div>

// JavaScript代码
const computedStyleApp = createApp({
  setup() {
    const theme = ref('light')
    const size = ref('medium')
    const status = ref('normal')
    
    const computedStyle = computed(() => {
      const themes = {
        light: {
          backgroundColor: '#ffffff',
          color: '#333333',
          border: '2px solid #ddd'
        },
        dark: {
          backgroundColor: '#2c3e50',
          color: '#ecf0f1',
          border: '2px solid #34495e'
        },
        colorful: {
          background: 'linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1)',
          color: 'white',
          border: '2px solid #fff'
        },
        gradient: {
          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
          color: 'white',
          border: '2px solid #667eea'
        }
      }
      
      const sizes = {
        small: { width: '150px', height: '75px', fontSize: '12px' },
        medium: { width: '200px', height: '100px', fontSize: '16px' },
        large: { width: '250px', height: '125px', fontSize: '20px' }
      }
      
      const statuses = {
        normal: { opacity: 1, transform: 'scale(1)' },
        hover: { opacity: 0.8, transform: 'scale(1.05)' },
        active: { opacity: 1, transform: 'scale(0.95)' },
        disabled: { opacity: 0.5, transform: 'scale(1)', filter: 'grayscale(100%)' }
      }
      
      return {
        ...themes[theme.value],
        ...sizes[size.value],
        ...statuses[status.value],
        transition: 'all 0.3s ease'
      }
    })
    
    return {
      theme,
      size,
      status,
      computedStyle
    }
  }
})
computedStyleApp.mount('#computed-style-demo')
        </textarea>
      </div>

      <div class="performance-note">
        <strong>性能提示：</strong>计算属性会缓存结果，只有依赖的响应式数据发生变化时才会重新计算。
      </div>
    </div>

    <!-- 6. CSS变量绑定 -->
    <div class="container">
      <h2>6. CSS变量绑定</h2>
      <p>Vue支持绑定CSS自定义属性（CSS变量），这为主题切换和动态样式提供了强大的能力。</p>
      
      <div class="demo-section" id="css-variables-demo">
        <h3>CSS变量绑定演示</h3>
        <div 
          class="style-box"
          :style="{
            '--primary-color': primaryColor,
            '--secondary-color': secondaryColor,
            '--border-radius': borderRadius + 'px',
            background: `linear-gradient(45deg, var(--primary-color), var(--secondary-color))`,
            color: 'white',
            textShadow: '1px 1px 2px rgba(0,0,0,0.5)',
            borderRadius: 'var(--border-radius)'
          }">
          CSS变量
        </div>
        
        <div class="controls">
          <label>主色：<input type="color" v-model="primaryColor"></label>
          <label>辅色：<input type="color" v-model="secondaryColor"></label>
          <label>圆角：<input type="range" min="0" max="50" v-model="borderRadius"> {{borderRadius}}px</label>
        </div>
      </div>

      <div class="code-block">
        <textarea readonly>
<!-- CSS变量绑定 -->
<div 
  class="style-box"
  :style="{
    '--primary-color': primaryColor,
    '--secondary-color': secondaryColor,
    '--border-radius': borderRadius + 'px',
    background: `linear-gradient(45deg, var(--primary-color), var(--secondary-color))`,
    color: 'white',
    textShadow: '1px 1px 2px rgba(0,0,0,0.5)',
    borderRadius: 'var(--border-radius)'
  }">
  CSS变量
</div>

// JavaScript代码
const cssVariablesApp = createApp({
  setup() {
    const primaryColor = ref('#e74c3c')
    const secondaryColor = ref('#f39c12')
    const borderRadius = ref(20)
    
    return {
      primaryColor,
      secondaryColor,
      borderRadius
    }
  }
})
cssVariablesApp.mount('#css-variables-demo')
        </textarea>
      </div>

      <div class="info">
        <strong>高级用法：</strong>CSS变量特别适合主题系统，可以在运行时动态改变整个应用的样式。
      </div>
    </div>

    <!-- 7. 响应式样式 -->
    <div class="container">
      <h2>7. 响应式样式</h2>
      <p>结合计算属性，我们可以创建响应式样式，根据不同条件应用不同的样式规则。</p>
      
      <div class="demo-section" id="responsive-style-demo">
        <h3>响应式样式演示</h3>
        <div class="style-box" :style="responsiveStyle">
          响应式样式
        </div>
        
        <div class="controls">
          <label>屏幕宽度模拟：<input type="range" min="320" max="1200" v-model="screenWidth"> {{screenWidth}}px</label>
          <p>当前断点：<strong>{{currentBreakpoint}}</strong></p>
        </div>
      </div>

      <div class="code-block">
        <textarea readonly>
<!-- 响应式样式 -->
<div class="style-box" :style="responsiveStyle">
  响应式样式
</div>

// JavaScript代码
const responsiveStyleApp = createApp({
  setup() {
    const screenWidth = ref(800)
    
    const currentBreakpoint = computed(() => {
      const width = screenWidth.value
      if (width < 480) return '移动端'
      if (width < 768) return '平板端'
      return '桌面端'
    })
    
    const responsiveStyle = computed(() => {
      const width = screenWidth.value
      
      if (width < 480) {
        return {
          width: '150px',
          height: '75px',
          fontSize: '12px',
          backgroundColor: '#e74c3c',
          color: 'white',
          borderRadius: '5px'
        }
      } else if (width < 768) {
        return {
          width: '200px',
          height: '100px',
          fontSize: '14px',
          backgroundColor: '#f39c12',
          color: 'white',
          borderRadius: '10px'
        }
      } else {
        return {
          width: '250px',
          height: '125px',
          fontSize: '18px',
          backgroundColor: '#27ae60',
          color: 'white',
          borderRadius: '15px'
        }
      }
    })
    
    return {
      screenWidth,
      currentBreakpoint,
      responsiveStyle
    }
  }
})
responsiveStyleApp.mount('#responsive-style-demo')
        </textarea>
      </div>

      <div class="performance-note">
        <strong>实际应用：</strong>响应式样式在移动端适配和主题切换中非常有用。
      </div>
    </div>

    <!-- 最佳实践 -->
    <div class="container">
      <h2>最佳实践与注意事项</h2>
      <ul>
        <li><strong>性能优化：</strong>优先使用Class绑定而不是内联样式，CSS类可以被浏览器优化</li>
        <li><strong>可维护性：</strong>将复杂的样式逻辑封装在计算属性中</li>
        <li><strong>命名规范：</strong>使用语义化的CSS类名，避免样式与逻辑耦合</li>
        <li><strong>CSS变量：</strong>利用CSS变量实现主题系统和动态样式</li>
        <li><strong>响应式设计：</strong>结合媒体查询和Vue的响应式数据实现自适应布局</li>
        <li><strong>避免内联样式：</strong>除非必要，尽量避免大量使用内联样式</li>
      </ul>
    </div>

    <script>
      const { createApp, ref, computed } = Vue

      // 1. Class对象绑定应用
      const classObjectApp = createApp({
        setup() {
          const isActive = ref(false)
          const hasError = ref(false)
          const hasWarning = ref(false)
          const isLarge = ref(false)
          const isRounded = ref(false)
          const hasShadow = ref(false)
          
          return {
            isActive,
            hasError,
            hasWarning,
            isLarge,
            isRounded,
            hasShadow
          }
        }
      })
      classObjectApp.mount('#class-object-demo')

      // 2. Class数组绑定应用
      const classArrayApp = createApp({
        setup() {
          const baseClass = ref('')
          const themeClass = ref('')
          const isAnimated = ref(true)
          const shouldRotate = ref(false)
          
          return {
            baseClass,
            themeClass,
            isAnimated,
            shouldRotate
          }
        }
      })
      classArrayApp.mount('#class-array-demo')

      // 3. Style对象绑定应用
      const styleObjectApp = createApp({
        setup() {
          const bgColor = ref('#3498db')
          const textColor = ref('#ffffff')
          const borderColor = ref('#2c3e50')
          const fontSize = ref(16)
          const borderRadius = ref(10)
          const rotation = ref(0)
          const scale = ref(1)
          const borderWidth = ref(2)
          
          return {
            bgColor,
            textColor,
            borderColor,
            fontSize,
            borderRadius,
            rotation,
            scale,
            borderWidth
          }
        }
      })
      styleObjectApp.mount('#style-object-demo')

      // 4. Style数组绑定应用
      const styleArrayApp = createApp({
        setup() {
          const baseStyle = ref({
            border: '2px solid #333',
            transition: 'all 0.3s ease'
          })
          
          const themeStyle = ref({
            backgroundColor: '#ecf0f1',
            color: '#2c3e50'
          })
          
          const sizeStyle = ref({
            width: '200px',
            height: '100px'
          })
          
          const effectStyle = ref({})
          
          const randomizeStyles = () => {
            const colors = ['#e74c3c', '#3498db', '#2ecc71', '#f39c12', '#9b59b6']
            themeStyle.value = {
              backgroundColor: colors[Math.floor(Math.random() * colors.length)],
              color: 'white',
              transform: `rotate(${Math.random() * 360}deg)`
            }
          }
          
          const resetStyles = () => {
            themeStyle.value = {
              backgroundColor: '#ecf0f1',
              color: '#2c3e50',
              transform: 'rotate(0deg)'
            }
          }
          
          const toggleEffect = () => {
            effectStyle.value = effectStyle.value.boxShadow ? {} : {
              boxShadow: '0 8px 16px rgba(0,0,0,0.3)',
              transform: 'translateY(-5px)'
            }
          }
          
          return {
            baseStyle,
            themeStyle,
            sizeStyle,
            effectStyle,
            randomizeStyles,
            resetStyles,
            toggleEffect
          }
        }
      })
      styleArrayApp.mount('#style-array-demo')

      // 5. 计算属性样式应用
      const computedStyleApp = createApp({
        setup() {
          const theme = ref('light')
          const size = ref('medium')
          const status = ref('normal')
          
          const computedStyle = computed(() => {
            const themes = {
              light: {
                backgroundColor: '#ffffff',
                color: '#333333',
                border: '2px solid #ddd'
              },
              dark: {
                backgroundColor: '#2c3e50',
                color: '#ecf0f1',
                border: '2px solid #34495e'
              },
              colorful: {
                background: 'linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1)',
                color: 'white',
                border: '2px solid #fff'
              },
              gradient: {
                background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                color: 'white',
                border: '2px solid #667eea'
              }
            }
            
            const sizes = {
              small: { width: '150px', height: '75px', fontSize: '12px' },
              medium: { width: '200px', height: '100px', fontSize: '16px' },
              large: { width: '250px', height: '125px', fontSize: '20px' }
            }
            
            const statuses = {
              normal: { opacity: 1, transform: 'scale(1)' },
              hover: { opacity: 0.8, transform: 'scale(1.05)' },
              active: { opacity: 1, transform: 'scale(0.95)' },
              disabled: { opacity: 0.5, transform: 'scale(1)', filter: 'grayscale(100%)' }
            }
            
            return {
              ...themes[theme.value],
              ...sizes[size.value],
              ...statuses[status.value],
              transition: 'all 0.3s ease'
            }
          })
          
          return {
            theme,
            size,
            status,
            computedStyle
          }
        }
      })
      computedStyleApp.mount('#computed-style-demo')

      // 6. CSS变量绑定应用
      const cssVariablesApp = createApp({
        setup() {
          const primaryColor = ref('#e74c3c')
          const secondaryColor = ref('#f39c12')
          const borderRadius = ref(20)
          
          return {
            primaryColor,
            secondaryColor,
            borderRadius
          }
        }
      })
      cssVariablesApp.mount('#css-variables-demo')

      // 7. 响应式样式应用
      const responsiveStyleApp = createApp({
        setup() {
          const screenWidth = ref(800)
          
          const currentBreakpoint = computed(() => {
            const width = screenWidth.value
            if (width < 480) return '移动端'
            if (width < 768) return '平板端'
            return '桌面端'
          })
          
          const responsiveStyle = computed(() => {
            const width = screenWidth.value
            
            if (width < 480) {
              return {
                width: '150px',
                height: '75px',
                fontSize: '12px',
                backgroundColor: '#e74c3c',
                color: 'white',
                borderRadius: '5px'
              }
            } else if (width < 768) {
              return {
                width: '200px',
                height: '100px',
                fontSize: '14px',
                backgroundColor: '#f39c12',
                color: 'white',
                borderRadius: '10px'
              }
            } else {
              return {
                width: '250px',
                height: '125px',
                fontSize: '18px',
                backgroundColor: '#27ae60',
                color: 'white',
                borderRadius: '15px'
              }
            }
          })
          
          return {
            screenWidth,
            currentBreakpoint,
            responsiveStyle
          }
        }
      })
      responsiveStyleApp.mount('#responsive-style-demo')
    </script>
  </body>
</html>